<template>
	<view :style="viewColor">
		<form @submit="formSubmit">
			<div class="haibao" v-if="form.mb_type==0">
				<div class="haibao-top">
					<div class="haitetx">
						<h3>{{form.nickname}}</h3>
						<p>{{form.position_name}}</p>
						<p>{{qyname}}</p>
					</div>
					<div class="haiimage">
						<view>
							<span>海报</span>
							<image :src="imgHost + '/index/erwm.png'"></image>
						</view>
						<view>
							<image :src="form.avatar" mode=""></image>
						</view>
					</div>
				</div>
				<div class="haibao-bott">
					<view>
						<span>
							<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
							<span>{{form.phone}}</span>
						</span>
						<span></span>
					</view>
					<view>
						<div class="odiver">
							<span>
								<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
							</span>
							<span>{{form.addres}}</span>
						</div>
						<span>
							<image :src="imgHost + '/index/right.png'" mode=""></image>
						</span>
					</view>
					<view>
						<span>
							<image :src="imgHost + '/index/ement.png'" mode=""></image>
							<span>{{form.email}}</span>
						</span>
						<span>
							<image :src="imgHost + '/index/right.png'" mode=""></image>
						</span>
					</view>
				</div>
			</div>
			<div class="haibao-two" v-if="form.mb_type==1">
				<div class="moban" @click="tiajzp(1)"
					style="height: 400rpx; background-color: rgb(235 235 235 / 57%);margin-top:20rpx;text-align: center;line-height: 400rpx;">
					<text v-if="!form.mb_img1" class="iconfont" style="color: #0000007a;">&#xe605;</text>
					<image v-else :src="form.mb_img1" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				</div>
				<div class="haibao1">
					<div class="haibao-top1">
						<div class="haitetx1">
							<h3>{{form.nickname}}</h3>
							<p>{{form.position_name}}</p>
							<p>{{qyname}}</p>
						</div>
						<div class="haiimage1">
							<view>
								<span>海报</span>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</div>
					</div>
					<div class="haibao-bott1">
						<view>
							<span>
								<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
								<span>{{form.phone}}</span>
							</span>
							<span></span>
						</view>
						<view>
							<div class="twotext">
								<span>
									<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
								</span>
								<span>{{address}}</span>
							</div>
							<span>
								<image :src="imgHost + '/index/right.png'" mode=""></image>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/ement.png'" mode=""></image>
								<span>{{form.email}}</span>
							</span>
							<span>
								<image :src="imgHost + '/index/right.png'" mode=""></image>
							</span>
						</view>
					</div>
				</div>
			</div>
			<div class="h-hanbao2" v-if="form.mb_type==2" style="margin-top: 40rpx;">
				<!-- <div class="bj">
               </div> -->
				<div class="sbajia"></div>
				<div>
					<div class="h-text">
						<div>
							<h3>{{form.nickname}}</h3>
							<p>{{form.position_name}}</p>
							<p>{{qyname}}</p>
						</div>
					</div>
					<div class="haibao-bott2">
						<view>
							<span>
								<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
								<span>{{form.phone}}</span>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
								<span>{{address}}</span>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/ement.png'" mode=""></image>
								<span>{{form.email}}</span>
							</span>
						</view>
						<view class="haibaoText">
							<view>
								<text>海报</text>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</view>
						<!-- <div class="haiimage1">
							<view>
								<span>海报</span>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</div> -->
					</div>
				</div>
				<div class="h-img" @click="tiajzp(2)">
					<div class='herimg' v-if="form.mb_img ==''">
						<text class="iconfont">&#xe605;</text>
						<span>添加照片</span>
					</div>
					<image v-else :src="form.mb_img" mode="aspectFill"></image>
				</div>
			</div>
			<div class="haibao-two" v-if="form.mb_type==3">
				<div class="moban" @click="upVideo"
					style="height: 400rpx; background-color: rgb(235 235 235 / 57%);margin-top:20rpx;text-align: center;line-height: 400rpx;">
					<text v-if="!form.mb_video" class="iconfont" style="color: #0000007a;">&#xe634;</text>
					<!-- <text v-if="!form.mb_video" style="font-size: 32rpx;">添加视频</text> -->
					<video v-else :src="form.mb_video" style="width: 100%;height: 100%;" mode="aspectFill"></video>
				</div>
				<div class="haibao1">
					<div class="haibao-top1">
						<div class="haitetx1">
							<h3>{{form.nickname}}</h3>
							<p>{{form.position_name}}</p>
							<p>{{qyname}}</p>
						</div>
						<div class="haiimage1">
							<view>
								<span>海报</span>
								<image :src="imgHost + '/index/erwm.png'"></image>
							</view>
						</div>
					</div>
					<div class="haibao-bott1">
						<view>
							<span>
								<image :src="imgHost + '/index/iconsj.png'" mode=""></image>
								<span>{{form.phone}}</span>
							</span>
							<span></span>
						</view>
						<view>
							<div class="twotext">
								<span>
									<image :src="imgHost + '/index/dinwe.png'" mode=""></image>
								</span>
								<span>{{address}}</span>
							</div>
							<span>
								<image :src="imgHost + '/index/right.png'" mode=""></image>
							</span>
						</view>
						<view>
							<span>
								<image :src="imgHost + '/index/ement.png'" mode=""></image>
								<span>{{form.email}}</span>
							</span>
							<span>
								<image :src="imgHost + '/index/right.png'" mode=""></image>
							</span>
						</view>
					</div>
				</div>
			</div>
			<!-- 名片样式 -->
			<view class="mpys">
				<p>名片样式</p>
				<div class="xuanze">
					<view :class="form.mb_type==0?'oimg':''" @click="setyans(0)">
						<image :src="imgHost + '/index/style	2.png'"></image>
					</view>
					<view :class="form.mb_type==1?'oimg':''" @click="setyans(1)">
						<image :src="imgHost + '/index/style4.png'"></image>
					</view>
					<view :class="form.mb_type==2?'oimg':''" @click="setyans(2)">
						<image :src="imgHost + '/index/style3.png'"></image>
					</view>
					<view :class="form.mb_type==3?'oimg':''" @click="setyans(3)">
						<image :src="imgHost + '/index/style4.png'"></image>
					</view>
				</div>
				<div class='zhuzu' v-if="false">
					<span>
						<image :src="imgHost + '/index/bao.png'" mode=""></image>
						<text>选择名片页模板</text>
					</span>
					<span>
						<text>基础默认版</text>
						<image :src="imgHost + '/index/redrig.png'" mode=""></image>
					</span>
				</div>
			</view>
			<!-- 个人信息 -->
			<view class="grxx">
				<p>个人信息</p>
			</view>
			<div class="mpdxx">
				<view class="mpxxbott" @click="xuzeqiye">
					<span>企业<span class="xxred">*</span></span>
					<div class="namexx">
						<div>{{qyname}}</div>
						<!-- <image :src="imgHost + '/index/right.png'" mode=""></image> -->
					</div>
				</view>
				<view class="mpxxbott">
					<span>密令<span class="xxred">*</span></span>
					<div class="namexx">
						<input type="text" v-model="form.secret_code" placeholder="联系该企业BOSS获取密令">
					</div>
				</view>
				<view class="mpxxbott">
					<span>职位</span>
					<div class="namexx">
						<input type="text" v-model="form.position_name" placeholder="请输入或选择职位">
						<picker @change="bindPickerChange" :value="index" :range="getzilest" range-key="name">
							<image :src="imgHost + '/index/right.png'" mode=""></image>
						</picker>
					</div>
				</view>
			</div>
			<div class="mpdxx">
				<view class="mpxxbott">
					<div class="toux">
						<!-- <view class="touxiang" v-if="!form.avatar">
					</view>
					<view class="touxiang" v-else>
						<image :src="form.avatar" mode=""></image>
					</view> -->
						<view class="touxiang" v-if="!form.avatar" @click.stop='uploadpic(1)'>
							<image :src="imgHost + '/index/tokrnon.png'" mode=""></image>
						</view>
						<button v-if="form.avatar" class="touxiang" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<image :src="form.avatar"></image>
						</button>
						<button v-if="form.avatar" class="touxiangS" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<!-- <view> -->
							<view style="font-size: 28rpx;color: #161616">选择</view>
							<image :src="imgHost + '/index/right.png'" mode=""></image>
							<!-- </view> -->
						</button>
					</div>
				</view>
				<view class="mpxxbott">
					<span>姓名<span class="xxred">*</span></span>
					<div class="namexx">
						<!-- <input v-model="form.nickname" maxlength="10"  placeholder="请填写名字"> -->
						<!-- <input type="nickname"  v-model="form.nickname" placeholder="请输入昵称" /> -->
						<view class='input'><input v-model="form.nickname" type='nickname' name='nickname'
								:maxlength="16"></input>
						</view>
						<image :src="imgHost + '/index/style1.png'" mode=""></image>
					</div>
				</view>
				<view class="mpxxbott">
					<span>手机<span class="xxred">*</span></span>
					<div class="namexx" @click="editPhone">
						<span>{{form.phone}}</span>
					</div>
				</view>
				<view class="mpxxbott">
					<span>地址<span class="xxred">*</span></span>
					<div class="namexx">
						<input type="text" placeholder="点击获取/输入地址" v-model="form.addres" @click="getaddress">
					</div>
				</view>

				<view class="mpxxbott">
					<span>微信</span>
					<div class="namexx">
						<input type="text" v-model="form.wechat" placeholder="请填写微信">
					</div>
				</view>
				<!-- <view class="mpxxbott">
					<span>企业微信</span>
					<div class="namexx">
						<input type="text" v-model="form.wecom" placeholder="请填写企业微信">
					</div>
				</view> -->
				<view class="mpxxbott">
					<span>微信二维码</span>
					<div class="namexx">
						<input v-if="!form.wechat_img" type="text" disabled="true" placeholder="请上传微信二维码"
							@click.stop='uploadpic(2)'>
						<image class="wechatCode" v-else :src="form.wechat_img" @click.stop='uploadpic(2)'></image>
					</div>
				</view>
				<view class="mpxxbott">
					<span>邮箱</span>
					<div class="namexx">
						<input type="text" v-model="form.email" placeholder="请填写邮箱">
					</div>
				</view>
				<!-- <view class="mpxxbott">
					<span>是否允许独占</span>
					<div class="namexx">
						<switch color="var(--view-theme)" @change="clientSwitch" style="transform:scale(0.7)" :checked="form.is_client_type==1"></switch>
					</div>
				</view> -->
				<view class="mpxxbott">
					<span>使用默认模板</span>
					<div class="namexx">
						<switch color="var(--view-theme)" @change="defaultSwitch" style="transform:scale(0.7)"
							:checked="form.defaultTemplate==1"></switch>
					</div>
				</view>
				<view class="mpxxbott">
					<span>选择招呼语</span>
					<div class="namexx">
						<text @click.stop="selectACall">{{ shareCheckText ? shareCheckText : '请选择招呼语' }}</text>
					</div>
				</view>
			</div>
			<!-- 功能区 -->
			<view class="functionArea">
				<p>功能区</p>
				<view class="selectArea">
					<cdt-draggrable-sort v-model="selectAreaList" :v-bind:id="isEdit ? 0 : 1" @start="start"
						@change="change" @deleteFunction="deleteFunction" item-class="tag-list-list"
						active-item-class="tag-list-list-acitive">
						<!-- #ifdef MP -->
						<template v-slot="{ name }">
							<view>
								<text>{{name}}</text>
							</view>
						</template>
						<!--  #endif -->
						<!-- #ifndef MP -->
						<template slot-scope="scope">
							<view>
								<text>{{scope.row.name}}</text>
							</view>
						</template>
						<!--  #endif -->
					</cdt-draggrable-sort>
				</view>
				<p v-if="noSelectAreaList.length>0">点击下列可添加功能</p>
				<view class="selectArea" v-if="noSelectAreaList.length>0">
					<view v-for="(item,index) in noSelectAreaList" @click="addFunction(item,index)">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<!-- 个性标签 -->
			<div class="gxbq" v-if="form.defaultTemplate!=1">
				<p>
					<text>个性标签</text>
					<switch color="var(--view-theme)" @change="switch_json.labelSwitch=$event.detail.value"
						style="transform:scale(0.7)" :checked="switch_json.labelSwitch"></switch>
				</p>
				<div class="tianjia">
					<view class="ofor" v-for="(item,index) in biaoqi" :key="index">{{item}}
						<div class="poster">
							<text @click="delile(index)" class='iconfont icon-shanchu' size="30rpx"></text>
						</div>
					</view>
					<div class="jia" @click="biaoqian">
						<span>+</span>
					</div>
				</div>
			</div>
			<!-- 个人简介 -->
			<div class="oinput" v-if="form.defaultTemplate!=1">
				<p>
					<text>个人简介</text>
					<switch color="var(--view-theme)" @change="switch_json.autographSwitch=$event.detail.value"
						style="transform:scale(0.7)" :checked="switch_json.autographSwitch"></switch>
				</p>
				<view class="textinput">
					<textarea placeholder-class='placeholder' :placeholder="`填写备注信息，100字以内`" v-model="form.autograph"
						:maxlength="150" auto-height="true">
			             </textarea>
				</view>
			</div>
			<!-- 我的企业 -->
			<div class="wdqy">
				<text>我的企业</text>
				<switch color="var(--view-theme)" @change="switch_json.enterpriseSwitch=$event.detail.value"
					style="transform:scale(0.7)" :checked="switch_json.enterpriseSwitch"></switch>
			</div>
			<div class="wdqyxx">
				<view>
					<view class="touxiang" v-if="!qiyeimg">
						<image :src="logo" mode=""></image>
					</view>
					<view class="touxiang" v-else>
						<image :src="qiyeimg" mode=""></image>
					</view>
					<div class="toux">
						<image :src="imgHost + '/index/right.png'" mode=""></image>
					</div>
				</view>
				<view>
					<span>企业名称</span>
					<p>
						{{qyname}}
					</p>
				</view>
				<view>
					<span>所属行业</span>
					<p>{{type_name}}</p>
				</view>
				<view class="guanw" v-if="false">
					<div>
						<span>官网链接</span>
						<!-- <p>https://www.yiliit.com/</p> -->
						<input type="text" v-model="form.site_url" placeholder="请到管理中心编辑">
					</div>
					<!-- <div class='toux' @click="tiandao">
						<image :src="imgHost + '/index/right.png'" mode=""></image>
					</div> -->
				</view>
			</div>
			<div class="wdqy" v-if="form.defaultTemplate!=1">
				<text>企业视频</text>
				<switch color="var(--view-theme)" @change="switch_json.videoSwitch=$event.detail.value"
					style="transform:scale(0.7)" :checked="switch_json.videoSwitch"></switch>
			</div>
			<div class="shangc" v-if="form.defaultTemplate!=1">
				<view class="sjhang" v-for="(item,index) in chooseQiyeVideo" :key="index">
					<image :src="item.image_src" mode=""></image>
					<text @click="spliceThree(index)" class='iconter iconfont' size="30rpx">&#xe6c5;</text>
				</view>

				<view class="sjhang" @click="addQiyeVideo">
					<div>
						<span>+</span>
						<span>视频</span>
					</div>
				</view>
			</div>
			<!-- 热销商品 -->
			<div class="wdqy" v-if="form.defaultTemplate!=1">
				<text>热销商品</text>
				<switch color="var(--view-theme)" @change="switch_json.productSwitch=$event.detail.value"
					style="transform:scale(0.7)" :checked="switch_json.productSwitch"></switch>
			</div>
			<div class="shangc" v-if="form.defaultTemplate!=1">
				<view class="sjhang" v-for="(item,index) in produimg" :key="index">
					<image :src="item" mode=""></image>

					<text @click="splicetwo(index)" class='iconter iconfont' size="30rpx">&#xe6c5;</text>
				</view>
				<!-- enter -->
				<view class="sjhang" @click="open">
					<div>
						<span>+</span>
						<span>商品</span>
					</div>
				</view>
			</div>
			<div class="wdqy" v-if="form.defaultTemplate!=1">
				<text>推荐热文</text>
				<switch color="var(--view-theme)" @change="switch_json.articleSwitch=$event.detail.value"
					style="transform:scale(0.7)" :checked="switch_json.articleSwitch"></switch>
			</div>
			<div class="shangc" v-if="form.defaultTemplate!=1">
				<view class="sjhang" v-for="(item,index) in hotlist" :key="index">
					<image :src="item" mode=""></image>
					<text @click="splice(index)" class='iconter iconfont' size="30rpx">&#xe6c5;</text>
				</view>

				<view class="sjhang" @click="wenz">
					<div>
						<span>+</span>
						<span>文章</span>
					</div>
				</view>
			</div>

			<!-- <view class="baoc" @click="baoc">保存</view> -->
			<button class='baoc' formType="submit">{{`保存修改`}}</button>
			<div style='height: 100rpx;'></div>
			<!-- <view class="yulan">预览名片</view> -->
			<!-- 选择招呼呀弹窗 -->
			<uni-popup ref="aCall" type="bottom">
				<view class="aCall">
					<view class="aCallTitle">
						选择招呼语
					</view>
					<scroll-view scroll-y="true" style="height: 700rpx;">
						<radio-group @change="radioChange">
							<view v-if="qiyexx.share_check_text">
								<view v-for="item in JSON.parse(qiyexx.share_check_text)" class="aCallDiv">
									<radio :value="item.text" :checked="item.text === shareCheckText" />
									<text>{{item.text}}</text>
								</view>
							</view>
							<view class="aCallDiv">
								<radio :value="diyShareText" :checked="diyShareText === shareCheckText" />
								<textarea v-model="diyShareText" placeholder="请输入自定义内容" :maxlength="30" />
							</view>
						</radio-group>
					</scroll-view>
				</view>
			</uni-popup>
			<!-- 热销商品弹出窗 -->
			<uni-popup ref="popup" type="bottom">
				<view class="rexiao">
					<scroll-view scroll-y="true" style="height: 700rpx;" v-if="rexiao.length!=0">
						<view v-for="(item,index) in rexiao" :key="index" class="xuze">
							<div>
								<view>
									<image :src="item.image"></image>
								</view>
								<span>{{item.store_name}}</span>
							</div>
							<div @click="xuanzhe(item,index)">
								选择
							</div>
						</view>
					</scroll-view>
					<view v-else style="text-align: center;padding-bottom: 50px;">
						请在商户端后台上传
					</view>
				</view>
			</uni-popup>
			<!-- 推荐热文弹出窗 -->
			<uni-popup ref="rwpopup" type="bottom">
				<view class="rexiao">
					<scroll-view scroll-y="true" style="height: 700rpx;" v-if="gotlist.length>0">
						<view v-for="(item,index) in gotlist" :key="index" class="xuze">
							<div>
								<view>
									<image :src="item.image_input"></image>
								</view>
								<span>{{item.title}}</span>
							</div>
							<div @click="hotxuanz(item,index)">
								选择
							</div>
						</view>
					</scroll-view>
					<view v-else style="text-align: center;padding-bottom: 50px;">
						请在商户端后台上传
					</view>
				</view>
			</uni-popup>
			<!-- 企业视频弹出窗 -->
			<uni-popup ref="videoPopup" type="bottom">
				<view class="rexiao">
					<scroll-view scroll-y="true" style="height: 700rpx;" v-if="qiyeVideo.length>0">
						<view v-for="(item,index) in qiyeVideo" :key="index" class="xuze">
							<div>
								<view>
									<image :src="item.image_src"></image>
								</view>
								<span>{{item.title}}</span>
							</div>
							<div @click="videoChoose(item,index)">
								选择
							</div>
						</view>
					</scroll-view>
					<view v-else style="text-align: center;padding-bottom: 50px;">
						请联系BOSS在我的-管理中心-企业视频中上传
					</view>
				</view>
			</uni-popup>
			<!-- 标签 -->
			<uni-popup ref="biaoqian" type="bottom">
				<div class='otian'>
					<div>
						<!-- <u-input v-model="bioaqian" maxlength="6" :type="type" /> -->
						<input type="text" maxlength="6" v-model="bioaqian">
					</div>
					<div>
						<view @click="quxiao">取消</view>
						<view @click="yesqud">确定</view>
					</div>
				</div>
			</uni-popup>
			<canvas canvas-id="canvas" v-if="canvasStatus"
				:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		</form>
	</view>
</template>

<script>
	import {
		getUserInfo,
	} from '@/api/user.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getMerProductHot
	} from '@/api/store.js';
	import {
		it_ente,
		get_position,
		carduser,
		getQiyeVideo,
		addenter
	} from '@/api/userminp.js';
	import {
		getArticleMerList,
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex"
	import wechat from '../../../libs/wechat';
	import {
		getGeocoder
	} from '@/api/store.js';
	export default {
		data() {
			return {
				canvasWidth: "",
				canvasHeight: "",
				qiyeimg: "",
				index: 0,
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				bioaqian: "",
				tian: false,
				sety: 0,
				// zhiwei: "请选择职位",
				show: false,
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				getzilest: [],
				form: {
					// 微信二维码
					wechat_img: null,
					enterprise_id: "",
					secret_code: "",
					position_id: "",
					avatar: '',
					nickname: '',
					phone: "",
					wechat: '',
					wecom: '',
					email: '',
					autograph: "",
					label_names: null,
					article_ids: '',
					product_ids: '',
					mb_type: 0,
					mb_img: '',
					mb_img1: '',
					sex: 0,
					position_name: "",
					site_url: '',
					is_client_type: null,
					mb_video: "",
					defaultTemplate: 0,
					switch_json: '',
					addres: '',
					addressInfo: [],
					lat: '',
					long: '',
				},
				isEdit: false,
				// 选中功能区列表
				selectAreaList: [{
						text: '创建名片',
						image: '/index/jiajia.png',
						ziew: 0,
					},
					{
						text: '添加微信',
						image: '/index/wx.png',
						ziew: 1,
					},
					{
						text: '发私信',
						image: '/index/duoxuan.png',
						ziew: 2,
					},
					{
						text: '直播',
						image: '/index/directSeeding.png',
						ziew: 4,
					},
					{
						text: '递名片',
						image: '/index/card.png',
						ziew: 6,
					},
					{
						text: '私人助理',
						image: '/index/assistant.png',
						ziew: 5,
					},
					{
						text: '转发名片',
						image: '/index/iconfj.png',
						ziew: 3,
					}
				],
				// 未选中功能区
				noSelectAreaList: [],
				// 开关内容
				switch_json: {
					// 个人简介开关
					autographSwitch: false,
					// 标签开关
					labelSwitch: false,
					// 我的企业开关
					enterpriseSwitch: false,
					// 企业视频开关
					videoSwitch: false,
					// 热销商品开关
					productSwitch: false,
					// 文章开关
					articleSwitch: false,
				},
				// 热销商品
				page: 1,
				limit: 100,
				rexiao: [],
				produimg: [],
				// 推荐热文
				gotlist: [],
				// 企业视频
				qiyeVideo: [],
				// 企业视频id
				qiyeVideoId: [],
				// 用户已选中企业视频
				chooseQiyeVideo: [],
				// 推荐热文
				hotlist: [],
				// 标签
				biaoqi: [],
				// 我的个人名片信息
				userlist: {},
				share_uid: '',
				qiyexx: {},
				// 企业信息
				qyexx: {},
				artiids: [],
				prodids: [],
				shpintj: [],
				// 文章
				wenzhan: [],
				logo: '',
				qyname: '',
				address: '',
				type_name: '',
				// 模板图片
				mobantp: '',
				canvasStatus: false,
				imgBase64: "",
				// 选中分享标题
				shareCheckText: "",
				// 自定义分享内容
				diyShareText: "",
				user_info:''
			};
		},
		computed: {
			...mapGetters(['viewColor'])
		},
		onLoad(e) {
			if (e.logo) this.logo = e.logo
			if (e.name) this.qyname = e.name
			if (e.uid) {
				this.form.enterprise_id = e.uid
				getQiyeVideo({
					status: 0,
					enterprise_id: e.uid,
					limit: 20
				}).then(res => {
					this.qiyeVideo = res.data.list
				})
			}
			if (e.address) this.address = e.address
			if (e.type_name) this.type_name = e.type_name
			if (e.mer_id) {
				this.mer_id = e.mer_id
				console.log(e.mer_id, "MErid")
				this.getProd()
				this.getHotList()
				this.getQiyeVideo()
			}
			// this.getcarduser()
		},
		onShow() {
			this.UserInfo()
			// this.artiids = []
			// this.prodids = []
			// this.hotlist = []
			// this.produimg = []
			// // 视频
			// this.qiyeVideo = []
			// this.qiyeVideoId = []
			// this.get_post()
			// this.getProd()
			// this.getHotList()
			// this.getQiyeVideo()
		},
		watch: {
			// 监听自定义招呼语
			diyShareText: function(newVal, oldVal) {
				if (oldVal == this.shareCheckText) {
					this.shareCheckText = newVal
				}
			}
		},
		methods: {
			//选择地址
			getaddress() {
				if (this.form.addres != '') {
					return
				}
				let self = this
				uni.showLoading({
					title: '定位中',
					mask: true,
				});
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						self.form.lat = res.latitude
						self.form.long = res.longitude
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							const data = res.data;
							// getCityList(data.address_component.province + '/' + data.address_component
							// 	.city + '/' + data.address_component.district + '/' + (!data
							// 		.address_reference.town ? '' : data.address_reference.town
							// 		.title)).then(res => {
							// 	self.addressInfo = res.data;
							// self.$set(self.form.userAddress, 'detail', data.formatted_addresses
							// 	.recommend);
							// 	console.log(self.form.userAddress);
							// 	console.log(self.form.latitude);
							// 	console.log(self.form.longitude);
							// 	uni.hideLoading();
							// }).catch(e => {
							uni.hideLoading();
							// 	uni.showToast({
							// 		title: '定位失败，请手动输入地址',
							// 		icon: 'none',
							// 		duration: 1000
							// 	});
							// })
							self.form.addres = data.address
							console.log(self.form.addres);
						}).catch(e => {
							uni.hideLoading();
							uni.showToast({
								title: '定位失败，请手动输入地址',
								icon: 'none',
								duration: 1000
							});
						})
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			// 选择招呼语
			radioChange(e) {
				this.shareCheckText = e.detail.value
			},
			// 选择招呼语弹窗
			selectACall() {
				this.$refs.aCall.open('bottom')
			},
			start() {
				this.isEdit = true
			},
			change(data) {
				console.log(data)
				this.selectAreaList = data
			},
			// 修改手机号
			editPhone() {
				uni.navigateTo({
					url: "/pages/users/user_modify_phone/index"
				})
			},
			// 是否独占
			clientSwitch(e) {
				if (e.detail.value) {
					this.form.is_client_type = 1
				} else {
					this.form.is_client_type = 0
				}
				console.log(this.form.is_client_type, 'is_client_type')
			},
			// 是否
			defaultSwitch(e) {
				if (e.detail.value) {
					this.form.defaultTemplate = 1
				} else {
					this.form.defaultTemplate = 0
				}
			},
			// 上传图片
			uploadpic: function(type) {
				let that = this;
				if (type == 1) {
					this.canvasStatus = true
					that.$util.uploadImageChange('upload/image', (res) => {
						this.form.avatar = res.data.url
					}, (res) => {}, (res) => {});
				} else if (type == 2) {
					that.$util.uploadImageChange('upload/image', (res) => {
						this.form.wechat_img = res.data.url
					}, (res) => {}, (res) => {});
				}

			},
			// 微信头像获取
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl)
				// if(avatarUrl.indexOf("wxfile")!=-1){
				// 	console.log("有")
				// 	this.getImageBase64_readFile(avatarUrl).then(res=>{
				// 		console.log(this.imgBase64)
				// 		// this.$util.uploadImgs('upload/image', this.imgBase64, (res) => {
				// 		// 	this.form.avatar = res.data.url
				// 		// }, (err) => {})
				// 	})
				// }else{
				this.$util.uploadImgs('upload/image', avatarUrl, (res) => {
					this.form.avatar = res.data.url
				}, (err) => {})
				// }
				// var imags = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(avatarUrl,'base64')
				// console.log(imags)
				// wx.uploadFile({
				//       url: HTTP_REQUEST_URL + '/api/upload/image/pics',
				//       filePath: avatarUrl,
				//       success (res){
				// 		  console.log(res)
				//       }
				// })
				// wxfile://tmp_9cc3480e6a0dfaea1d251940128ea35230404f90ae7ade1a.jpg
				// var arr = avatarUrl.split(":");
				// arr[0] = 'http:'
				// console.log(arr[0]+arr[1])
				// this.getImageBase64_readFile()
				// console.log(111111111111,this.imgBase64)
				// uni.uploadFile({
				// 	 url: HTTP_REQUEST_URL + '/api/upload/image/pics',
				// 	 filePath: avatarUrl,
				// 	 name: 'file',
				// 	 formData: {
				// 		 'user': 'test'  // 上传附带参数
				// 	 },
				// 	 success: (res)=>{
				// 	  console.log(res)
				//      }
				// })
			},
			async getImageBase64_readFile(tempFilePath) {
				const base64 = await new Promise(resolve => {
					//获取全局唯一的文件管理器
					wx.getFileSystemManager()
						.readFile({ //读取本地文件内容
							filePath: tempFilePath, // 文件路径
							encoding: 'base64', // 返回格式
							success: ({
								data
							}) => {
								return resolve('data:image/png;base64,' + data);
							},
							fail(res) {
								console.log('fail', res)
							}
						});
				});
				wx.hideLoading()
				console.log('base64', base64)
				this.imgBase64 = base64
				// return base64
			},
			// 跳转官网
			tiandao() {
				uni.navigateTo({
					url: '/pages/webview/websub/websub'
				})
			},
			UserInfo() {
				getUserInfo().then((res) => {
					this.user_info = res.data
					this.share_uid = res.data.uid
					this.form.avatar = res.data.avatar
					this.form.phone = res.data.phone
					this.form.nickname = res.data.nickname
					this.form.email = res.data.email
					this.getcarduser()
				})
			},
			xuzeqiye() {
				// uni.navigateTo({
				// 	url: '/pages/userminp/myisv/myisv'
				// })
			},
			// 上传视频
			async upVideo() {
				uni.chooseMedia({
					mediaType: ["video"],
					success: (res) => {
						uni.uploadFile({
							url: HTTP_REQUEST_URL + '/api/upload/video',
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								if (res.status == 200) {
									console.log(res.data.src)
									this.form.mb_video = res.data.src
									// this.videoInfo.video_src=res.data.url || res.data.src;
								} else {
									uni.showToast({
										title: '上传视频失败',
										icon: 'error',
										duration: 1000
									})
								}
								console.log(res);
							}
						});
					}
				})
			},
			// 添加模板照片
			tiajzp: function(e) {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res) => {
					// this.form.avatar=res.data.url
					if (e == 1) {
						this.form.mb_img1 = res.data.url
					} else {
						this.form.mb_img = res.data.url
					}
				}, (res) => {}, (res) => {});
			},
			input(e) {
				if (e.detail.value.length >= 10) {
					uni.showToast({
						title: '名字不能过长',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 我的个人名片信息
			getcarduser() {
				carduser({
					share_uid: this.share_uid
				}).then((res) => {
					// 选中视频
					// if(res.data.video_list.length==0){
					// 	for(var i=0;i<this.qiyeVideo.length;i++){
					// 		this.chooseQiyeVideo.push(this.qiyeVideo[i])
					// 	}
					// }else{
					res.data.video_list.map((item, index) => {
						this.chooseQiyeVideo.push(item)
					})
					// }
					// 选中商品
					// if(res.data.product_list.length==0){
					// 	for(var i=0;i<2;i++){
					// 		console.log(this.rexiao[i],this.rexiao,"i")
					// 		this.xuanzhe(this.rexiao[i])
					// 	}
					// }else{
					var product_list = res.data.product_list.reverse()
					product_list.map((item, index) => {
						this.produimg.push(item.image)
						this.prodids.push(item.id)
					})
					// }
					// 选中热文
					// if(res.data.article_list.length==0){
					// 	for(var i=0;i<this.gotlist.length;i++){
					// 		this.hotxuanz(this.gotlist[i])
					// 	}
					// }else{
					var article_list = res.data.article_list.reverse()
					article_list.map((item, index) => {
						this.artiids.push(item.article_id)
						this.hotlist.push(item.image_input)
					})
					// }
					if (!this.form.enterprise_id) {
						this.mer_id = res.data.enterprise.mer_id
						this.address = res.data.enterprise.address
						this.form.site_url = res.data.site_url
						this.form.enterprise_id = res.data.enterprise_id
						this.qyexx = res.data.enterprise
						// this.form.secret_code = res.data.enterprise.secret_code
						this.form.mb_type = res.data.mb_type
						// 获取企业视频
						this.getQiyeVideo()
						// 获取推销热文
						this.getHotList()
						// 获取推荐商品
						this.getProd()
						this.form.position_name = res.data.position_name
						this.form.position_id = res.data.position_id
						this.logo = res.data.enterprise.logo
						this.qyname = res.data.enterprise.name
						this.type_name = res.data.enterprise.type_name
						this.qiyexx = res.data.enterprise == null ? {} : res.data.enterprise
					}
					if (res.data.label_names) {
						this.biaoqi = JSON.parse(res.data.label_names)
						this.form.label_names = res.data.label_names
					}
					this.form.mb_img = res.data.mb_img
					this.form.mb_img1 = res.data.mb_img1
					this.form.avatar = res.data.avatar
					this.form.phone = res.data.phone
					this.form.autograph = res.data.autograph
					this.form.wechat = res.data.wechat
					this.form.wecom = res.data.wecom
					this.form.email = res.data.email
					this.form.mb_video = res.data.mb_video
					this.form.nickname = res.data.nickname
					this.form.is_client_type = res.data.is_client_type
					this.form.wechat_img = res.data.wechat_img
					this.form.addres = res.data.addres
					this.form.lat = res.data.lat
					this.form.long = res.data.long
					if (res.data.switch_json) {
						this.switch_json = JSON.parse(res.data.switch_json)
						if (this.switch_json.selectAreaList) {
							this.selectAreaList = this.switch_json.selectAreaList
						}
						if (this.switch_json.noSelectAreaList) {
							this.noSelectAreaList = this.switch_json.noSelectAreaList
						}
						if (this.switch_json.diyShareText) {
							this.diyShareText = this.switch_json.diyShareText
						}
						if (this.switch_json.shareCheckText) {
							this.shareCheckText = this.switch_json.shareCheckText
						}
						if (this.switch_json.secretCode) {
							this.form.secret_code = this.switch_json.secretCode
						}
					}
					this.userlist = res.data
					if (res.data.type == 0) {
						this.qiyexx.share_check_text = uni.getStorageSync("enterprise" + this.form.enterprise_id +
							"share_check_text")
					}
				})
			},
			// 名片样式
			setyans(e) {
				this.form.mb_type = e
			},
			// 添加标签
			biaoqian() {
				this.$refs.biaoqian.open('center')
			},
			// 添加指定功能
			addFunction(item, i) {
				this.selectAreaList.push(item)
				this.noSelectAreaList.splice(i, 1)
			},
			// 删除指定功能
			deleteFunction(i) {
				this.noSelectAreaList.push(this.selectAreaList[i])
				this.selectAreaList.splice(i, 1)
			},
			delile(index) {
				this.biaoqi.splice(index, 1)
			},
			quxiao() {
				this.$refs.biaoqian.close()
			},
			yesqud() {
				this.biaoqi.push(this.bioaqian)
				this.bioaqian = ''
				this.$refs.biaoqian.close()
			},
			// 推荐热文
			getHotList() {
				getArticleMerList(this.mer_id, 9999).then((res) => {
					this.gotlist = res.data.list
				})
			},
			// 获取企业视频
			getQiyeVideo() {
				getQiyeVideo({
					status: 0,
					enterprise_id: this.form.enterprise_id,
					limit: 9999
				}).then(res => {
					this.qiyeVideo = res.data.list
				})
			},
			// 增加企业视频
			addQiyeVideo(e) {
				if (this.userlist && this.userlist.enterprise && this.userlist.enterprise.open_svip == 1) {
					if (this.userlist && this.userlist.is_svip <= 0) {
						uni.showToast({
							title: "服务时间已到期",
							icon: "error"
						})
						return
					}
				}
				this.$refs.videoPopup.open('bottom')
			},
			// 增加文章
			wenz(e) {
				if (this.userlist && this.userlist.enterprise && this.userlist.enterprise.open_svip == 1) {
					if (this.userlist && this.userlist.is_svip <= 0) {
						uni.showToast({
							title: "服务时间已到期",
							icon: "error"
						})
						return
					}
				}
				this.$refs.rwpopup.open('bottom')
			},
			// 弹窗中选中文章
			hotxuanz(item, index) {
				this.artiids.push(item.article_id)
				this.hotlist.push(item.image_input)
				this.wenzhan.push(item)
				this.$refs.rwpopup.close()
				// this.gotlist.splice(index, 1)
			},
			// 弹窗中选中视频
			videoChoose(item, index) {
				this.chooseQiyeVideo.push(item)
				this.$refs.videoPopup.close()
			},
			// 热销商品
			getProd() {
				getMerProductHot(this.mer_id, {
					page: 1,
					limit: 100
				}).then((res) => {
					this.rexiao = res.data.list
				})
			},
			open() {
				if (this.userlist && this.userlist.enterprise && this.userlist.enterprise.open_svip == 1) {
					if (this.userlist && this.userlist.is_svip <= 0) {
						uni.showToast({
							title: "服务时间已到期",
							icon: "error"
						})
						return
					}
				}
				this.$refs.popup.open('bottom')
			},
			// 选中商品
			xuanzhe(item, index) {
				this.prodids.push(item.product_id)
				this.produimg.push(item.image)
				this.shpintj.push(item)
				this.$refs.popup.close()
			},
			// 删除热文
			splice(index) {
				this.wenzhan.splice(index, 1)
				this.artiids.splice(index, 1)
				this.hotlist.splice(index, 1)
			},
			// 删除商品
			splicetwo(index) {
				this.shpintj.splice(index, 1)
				this.prodids.splice(index, 1)
				this.produimg.splice(index, 1)
			},
			// 删除视频
			spliceThree(index) {
				this.chooseQiyeVideo.splice(index, 1)
				this.qiyeVideoId.splice(index, 1)
			},
			// 保存
			formSubmit(e) {
				console.log(this.switch_json)
				this.form.nickname = e.detail.value.nickname
				if (this.form.secret_code == '') {
					uni.showToast({
						title: '请输入密令',
						icon: 'none'
					});
					return false;
				}
				// 处理企业视频id
				var qiyeVideoIds = []
				this.chooseQiyeVideo.map((item, index) => {
					qiyeVideoIds.push(item.id)
				})
				this.form.article_ids = this.artiids.toString()
				this.form.product_ids = this.prodids.toString()
				this.form.video_ids = qiyeVideoIds.toString()
				this.form.label_names = JSON.stringify(this.biaoqi)
				if (this.userlist.type == 0) {
					this.userlist.enterprise.set_up = JSON.parse(uni.getStorageSync("enterprise" + this.form
						.enterprise_id + "default"))
				}
				if (this.form.defaultTemplate == 1) {
					if (!this.userlist.enterprise.set_up.company_field &&
						!this.userlist.enterprise.set_up.autograph &&
						!this.userlist.enterprise.set_up.video_ids &&
						!this.userlist.enterprise.set_up.product_ids &&
						!this.userlist.enterprise.set_up.article_ids) {
						return uni.showToast({
							title: "企业暂未配置模板",
							icon: "none"
						})
					}
					this.form.autograph = this.userlist.enterprise.set_up.company_field
					this.form.label_names = this.userlist.enterprise.set_up.autograph
					if (this.userlist.enterprise.set_up.video_ids) {
						this.form.video_ids = JSON.parse(this.userlist.enterprise.set_up.video_ids).toString()
					}
					if (this.userlist.enterprise.set_up.product_ids) {
						this.form.product_ids = JSON.parse(this.userlist.enterprise.set_up.product_ids).toString()
					}
					if (this.userlist.enterprise.set_up.article_ids) {
						this.form.article_ids = JSON.parse(this.userlist.enterprise.set_up.article_ids).toString()
					}
					this.form.mb_type = 0
					this.switch_json.autographSwitch = true;
					this.switch_json.labelSwitch = true;
					this.switch_json.enterpriseSwitch = true;
					this.switch_json.videoSwitch = true;
					this.switch_json.productSwitch = true;
					this.switch_json.articleSwitch = true;
				}
				this.switch_json.selectAreaList = this.selectAreaList
				this.switch_json.noSelectAreaList = this.noSelectAreaList
				this.switch_json.shareCheckText = this.shareCheckText
				this.switch_json.diyShareText = this.diyShareText
				this.switch_json.secretCode = this.form.secret_code
				// var obj = {
				// 	switch_json:this.switch_json,
				// 	selectAreaList:this.selectAreaList,
				// 	noSelectAreaList:this.noSelectAreaList
				// }
				this.form.switch_json = JSON.stringify(this.switch_json)
				it_ente(this.form).then((res) => {
					uni.removeStorageSync("share_uid")
					uni.clearStorageSync('user_info')
					uni.setStorageSync("share_uid",this.user_info.uid)
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/minp',
							fail() {
								uni.redirectTo({
									url: '/pages/index/minp',
								})
							}
						})
					}, 1500)
					// uni.navigateBack()
				}).catch((res) => {
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					})
				})
			},
			// baoc() {
			//      console.log(this.form);
			//      // if (this.form.ifpandu == null) {
			//      // 	addenter(this.form).then((res) => {
			//      // 		uni.navigateTo({
			//      // 			url: '/pages/index/minp'
			//      // 		})
			//      // 	}).catch((res) => {
			//      // 		uni.showToast({
			//      // 			title: res,
			//      // 			icon: 'none',
			//      // 			duration: 2000
			//      // 		})
			//      // 	})
			//      // } else {
			//      // }
			// },
			get_post() {
				get_position().then((res) => {
					this.getzilest = res.data.list
				})
			},

			bindPickerChange(e) {
				this.index = e.detail.value;
				this.form.position_name = this.getzilest[this.index].name
				this.form.position_id = this.getzilest[this.index].id
			},
			// touxian: function() {
			// 	let that = this;
			// 	this.canvasStatus = true
			// 	that.$util.uploadImageChange('upload/image', (res) => {
			// 		this.form.avatar = res.data.url
			// 	}, (res) => {}, (res) => {});
			// },
		}
	}
</script>

<style lang="scss">
	.otian {
		padding: 40rpx 50rpx;
		background-color: #fff;
		border-radius: 25rpx;

		div:nth-child(1) {
			width: 500rpx;
			height: 150rpx;
			background-color: #eeee;
		}

		div:nth-child(2) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			view {
				width: 230rpx;
				height: 100rpx;
				border: 2rpx solid var(--view-theme);
				border-radius: 50rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 30rpx;
				color: var(--view-theme);
			}

			view:nth-child(2) {
				background-color: var(--view-theme);
				color: #fff;
			}
		}
	}

	.h-hanbao2 {
		overflow: hidden;
		margin-top: 10rpx;
		margin: 0rpx 30rpx;
		display: flex;
		border-radius: 8rpx;
		box-shadow: 0 12rpx 26rpx rgba(0, 0, 0, 0.04);
		background-color: rgba(255, 255, 255, 0.3);
		position: relative;

		// .bj {
		//      background: url('../static/mine/xiexian.png');
		//      width: 132rpx;
		//      height: 360rpx;
		//      position: absolute;
		//      left: 330rpx;
		//      z-index: 14;
		// }
		.sbajia {

			position: absolute;
			left: 298rpx;
			bottom: 108rpx;
			width: 100rpx;
			height: 338rpx;
			// background: purple;
			transform: perspective(72rpx) rotateX(28deg);

			background-color: #fff;
			z-index: 2;
		}

		div:nth-child(2) {
			z-index: 10;
		}

		div:nth-child(3) {
			z-index: 1;
		}

		.h-text {
			width: 374rpx;
			background-image: url('../static/mine/trone.png') no-repeat;
			background-size: 100% 100%;
			padding-top: 12rpx;
			box-sizing: border-box;
			padding-left: 48rpx;

			h3 {
				font-weight: 600;
				font-size: 42rpx;
				line-height: 60rpx;
				text-align: left;
				color: #161616;

			}

			p {
				font-weight: 600;
				font-size: 22rpx;
				line-height: 40rpx;
				text-align: left;
				color: #a0a0a0;

			}

		}

		.haibao-bott2 {
			padding: 48rpx;
			padding-top: 0rpx;
			padding-right: 0rpx;
			margin-bottom: 48rpx;
			z-index: 15;

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					margin-top: 10rpx;

					image {
						width: 16rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						text-align: left;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}
			}

			&>view:nth-of-type(3) {
				image {
					width: 24rpx;
					height: 20rpx;
				}
			}
		}

		.h-img {
			width: 100%;
			height: 100;
			z-index: 10;
			overflow: hidden;

			// margin-top: 28rpx;
			.herimg {
				text {
					line-height: 300rpx;
					margin-left: 150rpx;
					font-size: 50rpx;
					// display: block;
				}

				span {
					margin-left: 40rpx;
					text-align: center;
					display: block;
					margin-top: -120rpx;
				}
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.haibao-two {
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
		margin: 0rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.97);

		.moban {
			text {
				font-size: 100rpx;
			}
		}

		.haibao1 {
			.haibao-top1 {
				padding: 48rpx;
				padding-bottom: 0rpx;
				display: flex;
				justify-content: space-between;

				.haiimage1 {
					padding-top: 15rpx;

					view:nth-child(1) {
						text-align: right;

						image {
							width: 28rpx;
							height: 28rpx;
							vertical-align: middle;
						}

						span {
							margin-right: 6rpx;
							vertical-align: middle;
							font-weight: 500;
							font-size: 30rpx;
							line-height: 40rpx;
							text-align: right;
							color: #595959;
						}
					}

					view:nth-child(2) {
						width: 144rpx;
						height: 144rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.haitetx1 {
					h3 {
						font-weight: 600;
						font-size: 42rpx;
						line-height: 80rpx;
						text-align: left;
						color: #161616;
					}

					p {
						font-weight: 600;
						font-size: 22rpx;
						line-height: 40rpx;
						text-align: left;
						color: #a0a0a0;
					}
				}
			}

			.haibao-bott1 {
				padding: 48rpx;
				padding-top: 0rpx;

				view {
					display: flex;
					justify-content: space-between;

					// align-items: center;
					.twotext {
						span {
							margin-top: 10rpx;

							image {
								width: 16rpx;
								height: 24rpx;
								vertical-align: middle;
							}

							span {
								font-weight: 600;
								font-size: 24rpx;
								line-height: 44rpx;
								color: #595959;
								vertical-align: middle;
								margin-left: 14rpx;
							}
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						margin-top: 10rpx;

						image {
							width: 16rpx;
							height: 24rpx;
							vertical-align: middle;
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				&>view:nth-of-type(3) {
					&>span:nth-of-type(1) {
						image {
							width: 24rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
	}

	page {
		background-color: #fff;
	}

	.rexiao {
		background-color: #f6f7f9;
		padding-top: 80rpx;
	}

	.xuze {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 14rpx 34rpx;
		padding: 10rpx;
		background-color: #fff;
		overflow: hidden;

		div:nth-child(1) {
			flex: 1;
			display: flex;

			view {
				width: 120rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			span {
				flex: 1;
				font-size: 23rpx;
				margin-left: 20rpx;
			}
		}

		div:nth-child(2) {
			margin: 0rpx 10rpx;
			width: 110rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background-color: var(--view-theme);
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.haibao {

		width: 688rpx;
		height: 464rpx;
		border-radius: 8rpx;
		// background: transparent;
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
		margin: 0rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.97);

		.haibao-top {
			height: 210rpx;
			padding: 48rpx;
			padding-bottom: 0rpx;
			display: flex;
			justify-content: space-between;

			.haiimage {
				padding-top: 30rpx;

				view:nth-child(1) {
					text-align: right;

					image {
						width: 28rpx;
						height: 28rpx;
						vertical-align: middle;
					}

					span {
						margin-right: 6rpx;
						vertical-align: middle;
						font-weight: 500;
						font-size: 30rpx;
						line-height: 40rpx;
						text-align: right;
						color: #595959;
					}
				}

				view:nth-child(2) {
					margin-top: 20rpx;
					width: 144rpx;
					height: 144rpx;
					overflow: hidden;
					border-radius: 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.haitetx {
				margin-top: 20rpx;

				h3 {
					font-weight: 600;
					font-size: 42rpx;
					line-height: 80rpx;
					text-align: left;
					color: #161616;
				}

				p {
					font-weight: 600;
					font-size: 22rpx;
					line-height: 40rpx;
					text-align: left;
					color: #a0a0a0;
				}
			}
		}

		.haibao-bott {
			margin-top: 25rpx;
			padding: 48rpx;
			padding-top: 0rpx;

			view {
				display: flex;
				justify-content: space-between;

				span {
					margin: right;
					margin-top: 10rpx;

					image {
						flex: 1;
						width: 16rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

				span {
					font-weight: 600;
					font-size: 24rpx;
					line-height: 44rpx;
					color: #595959;
					vertical-align: middle;
					margin-left: 14rpx;
				}

				// align-items: center;
				.odiver {
					span {
						margin: right;
						margin-top: 10rpx;

						image {
							flex: 1;
							width: 16rpx;
							height: 24rpx;
							vertical-align: middle;
						}

						span {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 44rpx;
							color: #595959;
							vertical-align: middle;
							margin-left: 14rpx;
						}
					}

					span {
						font-weight: 600;
						font-size: 24rpx;
						line-height: 44rpx;
						color: #595959;
						vertical-align: middle;
						margin-left: 14rpx;
					}
				}

			}

			&>view:nth-of-type(3) {
				&>span:nth-of-type(1) {
					image {
						width: 24rpx;
						height: 20rpx;
					}
				}
			}
		}
	}

	.mpys {
		padding: 48rpx;

		p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 44rpx;
			text-align: left;
			color: #161616;
		}

		.xuanze {
			padding-top: 48rpx;
			padding-bottom: 20rpx;

			view {
				margin-right: 20rpx;
				width: 112rpx;
				height: 128rpx;
				border-radius: 5rpx;
				overflow: hidden;
				background-color: #a0a0a0;
				display: inline-block;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.oimg {
				border: 2rpx solid var(--view-theme);
			}
		}

		.zhuzu {
			width: 656rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background-color: rgba(255, 171, 166, .2);
			display: flex;
			justify-content: space-between;
			align-items: center;

			span:nth-child(2) {

				text {
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					color: var(--view-theme);

				}

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}

			span {
				padding: 0rpx 20rpx;

				text {
					vertical-align: middle;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 44rpx;
					color: var(--view-theme);
				}

				image {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 30rpx;
					height: 28rpx;
				}
			}
		}
	}

	.grxx {
		p {
			padding-left: 48rpx;
			background: #f6f7f9;
			font-weight: 600;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: left;
			color: #595959;
		}

		.grxx-qyml {
			padding: 0rpx 48rpx;

			view {
				padding: 30rpx 0rpx;
				border-bottom: 2rpx solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;

					.xxred {
						color: var(--view-theme);
					}
				}

				input {
					width: 450rpx;
				}

				.okden {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 450rpx;
					font-weight: 400;
					font-size: 30rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;

					image {
						width: 16rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}

	.mpdxx {
		padding: 0rpx 48rpx;
		border-top: 20rpx solid #f6f7f9;

		.mpxxbott {
			border-bottom: 2rpx solid #eee;
			padding: 32rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;

				.xxred {
					color: red;
				}
			}

			p {
				width: 454rpx;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			.namexx {
				width: 454rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;

				input {
					flex: 1;
				}

				span {
					font-size: 32rpx;
					font-weight: 400;
				}

				image {
					width: 26.38rpx;
					height: 28rpx;
				}

				.wechatCode {
					height: 90rpx;
					width: 90rpx;
				}
			}

			.toux {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view:nth-child(2) {
					span {
						color: #161616;
						font-size: 32rpx;
						font-weight: 100;
					}

					image {
						margin-left: 20rpx;
					}
				}

				.touxiangS {
					display: flex;
					align-items: center;

					image {
						margin-left: 10rpx;
						vertical-align: middle;
					}
				}

				.touxiang {
					padding: 0rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}
		}
	}

	.oinput {
		border-top: 20rpx solid #f6f7f9;
		padding: 0rpx 48rpx;

		p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: left;
			color: #161616;
			display: flex;
			justify-content: space-between;
		}

		view {
			margin: 30rpx 0rpx;
		}
	}

	.functionArea {
		border-top: 20rpx solid #f6f7f9;
		padding: 0rpx 48rpx;

		&>p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: left;
			color: #161616;
		}

		.selectArea {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			&>view {
				margin: 20rpx 0rpx;
				margin-left: 20rpx;
				padding: 0rpx 25rpx;
				border-radius: 32rpx;
				background: #f7f8fa;
				font-weight: 600;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				color: #595959;

				.poster {
					width: 22rpx;
				}
			}
		}

		.active {
			background-color: pink !important;
		}
	}

	.gxbq {
		border-top: 20rpx solid #f6f7f9;
		padding: 0rpx 48rpx;

		p {
			font-weight: 600;
			font-size: 32rpx;
			line-height: 100rpx;
			text-align: left;
			color: #161616;
			display: flex;
			justify-content: space-between;
		}

		.tianjia {
			// width: ;

			padding: 30rpx 0rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// .ofor:nth-child(1) {
			// 	margin-left: 0rpx;
			// }

			.ofor {
				margin: 20rpx 0rpx;
				margin-left: 20rpx;
				padding: 0rpx 25rpx;
				border-radius: 32rpx;
				background: #f7f8fa;
				font-weight: 600;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				color: #595959;

				.poster {
					width: 22rpx;
				}
			}

			.jia {
				// margin-top: 20rpx;
				margin-left: 20rpx;
				width: 144rpx;
				// height: 64rpx;
				border: 2rpx solid var(--view-theme);
				border-radius: 50rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				span {
					// margin: auto;
					// line-height: 64rpx;
					// font-weight: 100;
					font-size: 40rpx;
					color: var(--view-theme);
					padding-bottom: 4rpx;
				}
			}
		}
	}

	.wdqy {
		height: 96rpx;
		background-color: #f6f7f9;
		font-weight: 600;
		font-size: 32rpx;
		line-height: 96rpx;
		text-align: left;
		color: #161616;
		padding: 0 48rpx;
		display: flex;
		justify-content: space-between;
	}

	.wdqyxx {
		padding: 0rpx 48rpx;

		.guanw {
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				display: flex;
				justify-content: space-between;
				align-items: center;

				input {
					margin-left: 80rpx;
					flex: 1;
					width: 90%;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 44rpx;
					text-align: left;
					color: #161616;
				}

			}

		}

		view {
			border-bottom: 2rpx solid #eee;
			padding: 32rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				border: none;
			}

			span {
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			p {
				width: 454rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}

			.touxiang {
				padding: 0rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.toux {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 44rpx;
				text-align: right;
				color: #777;

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}
		}
	}

	.textinput {
		padding: 40rpx;
		background-color: #f9f9f9;
	}

	.shangc {
		padding: 48rpx;

		.sjhang {
			margin: 20rpx 15rpx;
			vertical-align: middle;
			border: 2rpx dashed #595959;
			display: inline-block;
			margin-right: 10rpx;
			width: 180rpx;
			height: 180rpx;
			position: relative;
		}

		.sjhangnoe {
			display: none;
		}

		view {


			.iconter {
				position: absolute;
				top: -24rpx;
				left: 140rpx;
				font-size: 52rpx;
				border-radius: 100%;
				overflow: hidden;
				background-color: #fff;
			}

			image {
				width: 100%;
				height: 100%;
			}

			div {
				text-align: center;

				span:nth-child(1) {
					color: #595959;
					display: block;
					font-size: 100rpx;
				}

				span:nth-child(2) {
					color: #595959;
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}

	.baoc {
		margin: auto;
		width: 464rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: var(--view-theme);
		box-shadow: 0 12rpx 36rpx rgba(193, 0, 0, 0.1);
		font-weight: 600;
		font-size: 34rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
		margin-bottom: 60rpx;
		margin-top: 40rpx;
	}

	.yulan {
		margin: auto;
		margin-top: 60rpx;
		width: 464rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: transparent;
		border: 2rpx solid var(--view-theme);
		font-weight: 400;
		font-size: 34rpx;
		text-align: center;
		color: var(--view-theme);
		line-height: 96rpx;
		margin-bottom: 60rpx;
	}

	.haibaoText {
		margin-top: 10rpx;

		&>view {
			display: flex;
			align-items: center;
			margin-top: 10px;

			text {
				margin-right: 10rpx;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.aCall {
		background: white;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;

		.aCallTitle {
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.aCallDiv {
			margin-bottom: 20rpx;
			display: flex;

			radio {
				margin-right: 20rpx;
			}

			textarea {
				width: 100%;
				border: 1rpx solid gainsboro;
				height: 120rpx;
				border-radius: 10rpx;
				padding: 10rpx;
			}
		}
	}
</style>